<template>
  <div>
    <h2>{{ list }}</h2>
    <h2>{{ person }}</h2>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.id }} --- {{ item.name }} --- {{ item.age }}
      </li>
    </ul>
    <table class="table" border="1">
      <tr>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {ref,reactive,toRefs} from 'vue';

let data=reactive({
  list:[
    {id:1,name:'张三',age:21},
    {id:2,name:'李四',age:27},
    {id:3,name:'王五',age:23},
    {id:4,name:'花花',age:25},
    {id:5,name:'莉莉',age:22}
  ],
  person:{
    name:'琪琪',
    age:24
  }
})


let {list,person} = toRefs(data)



</script>

<style scoped>

</style>